<script setup name="collection">
import { usePlayStore } from '@/stores'
import { formartNum, formatMsgTime } from '@/utils/util'

import MusicCell from '@/components/common/MusicCell.vue'

const props = defineProps({
  result: {
    type: Object
  },
  searchKey: {
    type: String
  }
})

const emit = defineEmits(['changeTabs'])
const playStore = usePlayStore()

// 播放全部
const playAll = () => {
  // 将当前歌单内的歌曲列表存入pinia
  playStore.setPlaylist(props.songs.filter(item => !item.vip))
  // 设置当前播放状态
  playStore.setPlayStatus(false)
  // 打开音乐弹窗
  playStore.changeMusicDialog(true)
}

const changeTabs = name => emit('changeTabs', name)

const highlightKeyword = (name) => {
  const regex = new RegExp(props.searchKey, 'gi')
  return name.replace(regex, '<span style="color: #5983b2;">$&</span>')
}
</script>

<template>
  <van-loading v-if="result.loading" size="24px" vertical>加载中...</van-loading>
  <template v-else>
    <van-cell-group inset :border="false" class="songlist">
      <MusicCell :list="result.songs" :offset="0" :showSticky="false">
        <template #radius>
          <van-cell title="单曲">
            <template #right-icon>
              <van-button class="transparentBtn" round size="mini" icon="play" @click="playAll" text="播放" />
            </template>
          </van-cell>
        </template>
      </MusicCell>
      <van-cell @click="changeTabs('1')" v-if="result.moreText">
        <template #title>
          <div class="checkAll">{{ result.moreText }} ></div>
        </template>
      </van-cell>
    </van-cell-group>

    <van-cell-group inset :border="false" class="playlist">
      <van-cell title="歌单" />
      <RouterLink v-for="item in result.playList.playLists" :key="item.id"
        :to="{ path: '/playlist', query: { id: item.id } }">
        <van-cell :border="false">
          <template #icon>
            <van-image :src="item.coverImgUrl" radius="10px" width="50" height="50" />
          </template>
          <template #title>
            <span v-html="highlightKeyword(item.name)"></span>
          </template>
          <template #label>
            {{ item.trackCount }}首音乐 by {{ item.creator.nickname }}, 播放{{ formartNum(item.playCount) }}
          </template>
        </van-cell>
      </RouterLink>
      <van-cell @click="changeTabs('1000')" v-if="result.playList.moreText">
        <template #title>
          <div class="checkAll">{{ result.playList.moreText }} ></div>
        </template>
      </van-cell>
    </van-cell-group>

    <van-cell-group inset :border="false" class="singer">
      <van-cell title="艺人" />
      <RouterLink :to="{ path: '/singer/detail', query: { id: item.id } }" v-for="item in result.artist.artists"
        :key="item.id">
        <van-cell :border="false">
          <template #icon>
            <div class="icon">
              <van-image :src="item.picUrl" round="" width="50" height="50" />
              <img v-if="item.identityIconUrl" class="identityIcon" :src="item.identityIconUrl">
            </div>
          </template>
          <template #title>
            <span v-html="highlightKeyword(item.name)"></span>
            <span v-if="item.alias.length">({{ item.alias[0] }})</span>
          </template>
          <template #label>
            <span>专辑数：{{ item.albumSize }}</span>
          </template>
          <template #extra>
            <van-button icon="plus" size="small" round color="#ff3534">关注</van-button>
          </template>
        </van-cell>
      </RouterLink>
      <van-cell @click="changeTabs('100')" v-if="result.artist.moreText">
        <template #title>
          <div class="checkAll">{{ result.artist.moreText }} ></div>
        </template>
      </van-cell>
    </van-cell-group>

    <van-cell-group inset :border="false" class="album">
      <van-cell title="专辑" />
      <RouterLink :to="{ path: '/album', query: { id: item.id } }" v-for="item in result.album.albums" :key="item.id">
        <van-cell :border="false">
          <template #icon>
            <van-image :src="item.picUrl" radius="10px" width="50" height="50" />
          </template>

          <template #title>
            <span v-html="highlightKeyword(item.name)"></span>
          </template>

          <template #label>
            <span v-for="(i, index) in item.artists" :key="index">
              <span v-if="searchKey === i.name">{{ i.name }}</span>
            </span>
            &nbsp;
            <span>{{ formatMsgTime(item.publishTime) }}</span>
          </template>
        </van-cell>
      </RouterLink>
      <van-cell @click="changeTabs('10')" v-if="result.album.moreText">
        <template #title>
          <div class="checkAll">{{ result.album.moreText }} ></div>
        </template>
      </van-cell>
    </van-cell-group>

    <van-cell-group inset :border="false" class="simquery" v-if="result.sim_query">
      <van-cell title="相关搜索" />
      <van-cell>
        <div class="btn">
          <van-button v-for="item in result.sim_query.sim_querys" :key="item" plain round size="small"
            :text="item.keyword" />
        </div>
      </van-cell>
    </van-cell-group>
  </template>
</template>

<style scoped lang="scss">
.van-cell {
  background-color: var(--color-background);
  opacity: .9;
  color: var(--reversal-text);
}

.playlist,
.singer,
.album,
.simquery {
  margin-top: 10px;

  .van-image {
    margin-right: 6px;
  }
}

.simquery {
  .btn {
    display: flex;
    flex-wrap: wrap;

    .van-button--round {
      font-size: 10px;
      background-color: transparent !important;
      height: 24px;
      margin: 4px 10px;

      :deep(.van-button__content) {
        color: var(--reversal-text);
      }
    }
  }
}

.singer {
  .icon {
    margin-right: 6px;
    position: relative;

    .identityIcon {
      width: 20px;
      height: 20px;
      position: absolute;
      bottom: 4px;
      right: 0px;
    }
  }

  .van-button--round {
    font-size: 10px;
    background-color: transparent !important;
    height: 24px;
    margin-top: 16px;

    :deep(.van-button__content) {
      color: red;
    }
  }
}

.van-loading {
  height: 90vh;
  justify-content: center;
}
</style>